<!-- 挂号费用表 -->
<script lang="ts" setup>
import { ref,reactive,onMounted } from 'vue'
import { Delete, Plus, Search,Refresh,EditPen } from '@element-plus/icons-vue'
import { ElTable } from 'element-plus'
import { ElMessage, ElMessageBox } from 'element-plus'
import http from '@/http'
import { formatDate } from '@/utils/dateFormatter';//引入全局日期格式化工具
import { ElNotification } from 'element-plus'//导入消息提示框
// 分页
import type { ComponentSize,TableInstance } from 'element-plus'
let PageNum = ref(1)
let pageSize = ref(5)
const size = ref<ComponentSize>('default')
const background = ref(false)
const disabled = ref(false)

const handleSizeChange = (val: number) => {
  console.log(`${val} items per page`)
  pageSize.value=val
  getPage()
}
const handleCurrentChange = (val: number) => {
  console.log(`current page: ${val}`)
  PageNum.value=val
  getPage()
}
const tableData=ref ([])
// 科室名称：
let name = ref('')
// 状态：
let status = ref(0)
let options = ref([
  {
    value: 0,
    label: '正常',
  },{
    value:1,
    label: '停止',
  }
])
// 字典类型
let type = ref('')
// 总条数
let total=ref(0)
//总页数
let pages=ref(0)
// 查询字典
const getPage=()=>{
   //带用户名条件、当前页、每页条数的参数值
   http.get('/regFee/getPage', {
    params: {
      pageNum: PageNum.value,
      pageSize: pageSize.value,
      name: name.value,
      status :status.value,
    }
  }).then((res) => {
    console.log(res)
    tableData.value = res.list
    total.value = res.total
    pages.value=res.pages
  })
}
// 窗体加载事件
onMounted(() => {
 getPage()
})
// 重置
let choz=()=>{
   name.value=''
   status.value=0
}
// 添加
let dialogFormVisible = ref(false)
const formLabelWidth = '140px'
let form = ref({
      /**
     * 挂号项ID
     */
       regItemId:'',
    /**
     * 挂号项目名称
     */
      regItemName:'',
    /**
     * 金额
     */
      regItemFee:'',
    /**
     * 创建时间
     */
      createTime:'',
    /**
     * 更新时间
     */
      updateTime:'',
    /**
     * 创建者
     */
      createBy:'',
    /**
     * 更新者
     */
      updateBy:'',
    /**
     * 状态（0正常 1停用）
     */
      status:0,
    /**
     * 删除标志（0正常 1删除）
     */
      delFlag:'',
})
const addDict=()=>{
  http.post("/regFee/addRegFee",form.value).then((res)=>{
    console.log(res)
    getPage()
    form.value={
     regItemId:'',
      regItemName:'',
      regItemFee:'',
      createTime:'',
      updateTime:'',
      createBy:'',
      updateBy:'',
      status:0,
      delFlag:'',
    }
    dialogFormVisible.value=false
      ElNotification({
    title: 'Success',
    message: '添加成功',
    type: 'success',
  })
  })
}
// 
interface dict {
  id: number
  date: string
  name: string
  address: string
}
//编号组
let ids=ref([])
// 表格的元素引用
const multipleTableRef = ref<TableInstance>()
const multipleSelection = ref<number[]>([]) // 存储选中的 deptId
// 获取选中的用户
const handleSelectionChange = (val: dict[]) => {
  console.log("选中的行数据:", val);
  // 使用 map 方法从选中的行数据中提取 deptId，并将这些 deptId 存储在 multipleSelection 数组中
  multipleSelection.value = val.map(row => row.regItemId);
  ids.value=multipleSelection.value;
  console.log("选中的 dictId:", multipleSelection.value);
}
// 修改
let form1=ref({
     regItemId:'',
      regItemName:'',
      regItemFee:'',
      createTime:'',
      updateTime:'',
      createBy:'',
      updateBy:'',
      status:0,
      delFlag:'',
    })
// 修改按钮
const handleEdit = async(index: number, row) => {
  dialogupdate.value=true
  form1.value.regItemId=row.regItemId,
  form1.value.regItemName=row.regItemName,
  form1.value.regItemFee=row.regItemFee,
  form1.value.createTime=row.createTime,
  form1.value.updateTime=row.updateTime,
  form1.value.createBy=row.createBy,
  form1.value.updateBy=row.updateBy,
  form1.value.status=row.status,
  form1.value.delFlag=row.delFlag
}
// 修改确定按钮
const upadte=()=>{
  http.post('/regFee/updateRegFee',form1.value).then((res)=>{
    if (res > 0) {
      //弹出添加成功消息提示
      ElMessage({
        message: '修改成功',
        type: 'success',
      })
      //清空添加表单数据
      form1.value = {
      regItemId:'',
      regItemName:'',
      regItemFee:'',
      createTime:'',
      updateTime:'',
      createBy:'',
      updateBy:'',
      status:0,
      delFlag:'',
      }
      //关闭对话框
      dialogupdate.value = false
      //重新获取当前页的数据
      getPage()
    }
  })
}
//删除
const handleDelete = async(index: number, row) => {
 ids.value=row.regItemId
    http.post("/regFee/deleteRegFeex",{id:ids.value}).then((res)=>{
      console.log(res)
      if(res>0){
        getPage()
        ElNotification({
    title: 'Success',
    message: '删除成功',
    type: 'success',
  })
      }else{
        ElMessage({
          type: 'error',
          message: '删除失败，请稍后重试',
        });
      }
    })
}
const open = () => {
  if (ids.value.length === 0) {
    ElMessage.error('请至少选择一个');
    return;
  }
  // 将数组元素用逗号连接成字符串，用于确认框提示
  const idString = ids.value.join(',');
  ElMessageBox.confirm(
    `你是否删除编号为 ${idString} 的字典?`,
    '提示',
    {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'warning',
    }
  )
    .then(() => {
           // 直接将数组作为请求体发送
           http.post('/regFee/deleteRegFee', ids.value)
     .then((res) => {
        console.log(res);
        if (res > 0) {
          ElMessage({
            type: 'success',
            message: 'Delete completed',
          });
        }
        getPage()
      })
     .catch((error) => {
        console.error('请求出错:', error);
        ElMessage({
          type: 'error',
          message: '删除失败，请稍后重试',
        });
      });
    })
    .catch(() => {
      ElMessage({
        type: 'info',
        message: 'Delete canceled',
      })
    })
}
const datele=()=>{

}
let dialogupdate=ref(false)
</script>

<template>
    <!-- 添加模态框 -->
    <el-dialog v-model="dialogFormVisible" title="添加挂号费信息" width="500">
        <el-form :model="form">
            <el-form-item label="挂号费名称:" :label-width="formLabelWidth">
        <el-input v-model="form.regItemName" autocomplete="off" />
      </el-form-item>
      <el-form :model="form.regItemFee">
        <el-form-item label="项目价格:" :label-width="formLabelWidth">
        <el-input-number v-model="form.regItemFee"  style="width: 400px;" :min="1" autocomplete="off"  />
      </el-form-item>
    </el-form>
      <el-form-item label="状态:" :label-width="formLabelWidth">
        <el-radio-group v-model="form.status">
          <el-radio :value="1">停用</el-radio>
          <el-radio :value="0">正常</el-radio>
        </el-radio-group>
      </el-form-item>
    </el-form>
    <template #footer>
      <div class="dialog-footer">
        <el-button type="primary" @click="addDict">
          确定
        </el-button>
        <el-button @click="dialogFormVisible = false">取消</el-button>
      </div>
    </template>
  </el-dialog>
      <!-- 修改模态框 -->
      <el-dialog v-model="dialogupdate" title="修改项目收费" width="500">
        <el-form :model="form1">
            <el-form-item label="挂号费名称:" :label-width="formLabelWidth">
        <el-input v-model="form1.regItemName" autocomplete="off" />
      </el-form-item>
      <el-form :model="form1.regItemFee">
        <el-form-item label="项目价格:" :label-width="formLabelWidth">
        <el-input-number v-model="form1.regItemFee"  style="width: 400px;" :min="1" autocomplete="off"  />
      </el-form-item>
    </el-form>
      <el-form-item label="状态:" :label-width="formLabelWidth">
        <el-radio-group v-model="form1.status">
          <el-radio value="1">停用</el-radio>
          <el-radio value="0">正常</el-radio>
        </el-radio-group>
      </el-form-item>
    </el-form>
    <template #footer>
      <div class="dialog-footer">
        <el-button type="primary" @click="upadte">
          确定
        </el-button>
        <el-button @click="dialogupdate = false">取消</el-button>
      </div>
    </template>
  </el-dialog>
    <!-- 头部搜索 -->
    <el-row>
    <el-col :span="24">
        挂号费名称：<el-input v-model="name" style="width: 140px" placeholder="Please input" /> 
  状态：<el-select
    v-model="status"
    clearable
    placeholder="字典状态"
    style="width: 140px"
  >
    <el-option
      v-for="item in options"
      :key="item.value"
      :label="item.label"
      :value="item.value"
    />
  </el-select>    
        <el-button :icon="Search" @click="getPage" type="primary">搜索</el-button> <el-button :icon="Refresh" @click="choz"  type="primary">重置</el-button>
    </el-col>
  </el-row>
  <!-- 添加 修改 删除 -->
  <el-row>
    <el-col :span="14"> 
        <el-button  :icon="Plus"  type="primary" @click="dialogFormVisible = true" plain>添加</el-button>
        <el-button :icon="Delete" type="danger" @click="open" plain>删除</el-button>
    </el-col>
  </el-row>
  <!--  主体内容-->
  <el-row>
    <el-col :span="24"> 
      <el-table :data="tableData" style="width: 100%"
      @selection-change="handleSelectionChange" v-model="ids">
    <el-table-column type="selection" width="55" />
    <el-table-column label="挂号费ID" width="200">
      <template #default="scope">{{ scope.row.regItemId }}</template>
    </el-table-column>
    <el-table-column prop="regItemName" property="挂号费名称" label="挂号费名称" width="200" />
    <el-table-column prop="regItemFee" property="挂号费" label="挂号费" width="200" show-overflow-tooltip/>
    <el-table-column  property="状态" label="状态" width="200" >
      <template #default="scope">{{ scope.row.status==0?"正常":"停用" }}</template>
    </el-table-column>

    <el-table-column label="创建日期" width="200">
      <template #default="scope">{{ formatDate( scope.row.createTime,'YYYY年MM月DD日 HH:mm' ) }}</template>
    </el-table-column>
    <el-table-column prop label="操作">
      <template #default="scope">
        <!-- 修改 -->
        <el-button size="small" @click="handleEdit(scope.$index, scope.row)">
          <el-icon>
            <Edit />
          </el-icon>修改
        </el-button>
<!-- 删除 -->
        <el-button size="small" type="danger" @click="handleDelete(scope.$index, scope.row)">
          <el-icon>
            <Delete />
          </el-icon> 删除
        </el-button>
      </template>
    </el-table-column>
  </el-table>
  <!-- 分页 -->
 <!-- 分页 -->
 <div class="demo-pagination-block">
    <el-pagination
      v-model:current-page="PageNum"
      v-model:page-size="pageSize"
      :page-sizes="pages"
      :size="size"
      :disabled="disabled"
      :background="background"
      layout="total, sizes, prev, pager, next, jumper"
      :total="total"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange" 
    />
  </div>
    </el-col>
  </el-row>
</template>

<style scoped>
.demo-pagination-block + .demo-pagination-block {
  margin-top: 10px;
}
.demo-pagination-block .demonstration {
  margin-bottom: 16px;
}
</style>

